<template>
  <div>
    <div class="datails_vegetable" v-for="item in details" :key="item.cook_id">
      <div class="title_img">

        <video :src="item.vfurl" controls="controls" v-if="item.vfurl = ''"></video>
        <img :src="item.photo_path" alt="" v-else/>


        <div class="fen">
          <div class="left">
            <i class="iconfont icon-fanhui" @click="prev"></i>
          </div>
          <div class="right">
            <i class="iconfont icon-pengyouquan"></i>
            <i class="iconfont icon-weixin"></i>
            <i class="iconfont icon-diandiandian"></i>
          </div>
        </div>
      </div>
      <div class="datails_content">
        <div class="title_name">
          <h2>{{ item.title }}</h2>
          <span
            >精品 • 独家 • 浏览 {{ item.views_count_text }} • 收藏
            {{ item.favo_counts_text }}</span
          >
        </div>
        <div class="title_writer">
          <div class="img">
            <img :src="item.user.user_photo" alt="" />
            
            <h4>
              {{ item.user.nick }} <span>LV.{{ item.user.lvl }}</span>
            </h4>
          </div>
          <div class="writer">
            <p>关注</p>
          </div>
        </div>
        <div class="title_write">
          <div class="write">
            <p>{{ item.cookstory }}</p>
          </div>

          <div class="title_time">
            <div class="img" v-if="(item.cook_time = '')">
              
              <img :src="item.cook_time_image" alt=""/>

        

              {{ item.cook_time }}
            </div>
            <div class="difficulty" v-if="(item.cook_difficulty_image = '')">
              <img :src="item.cook_difficulty_image" alt="" />
              {{ item.cook_difficulty }}
            </div>
          </div>
        </div>

        <div class="Ingredients">
          <ul>
            <li>
              <p>食材清单</p>
              <span style="font-size: 12px; color: #3E8891n">加入采购清单</span>
            </li>
            <li v-for="(value, index) in item.major" :key="index">
              <p>{{ value.title }}</p>
              <span>{{ value.note }}</span>
            </li>
          </ul>
        </div>

        <div class="step">
          <div class="step_title">
            <h3>烹饪步骤</h3>
            <span>点击图片进入烹饪模式</span>
          </div>
          <div class="step_content">
            <ul>
              <li v-for="(price, index) in item.cookstep" :key="index">
                <p>步骤{{ index + 1 }}/{{ item.cookstep.length }}</p>
                <div class="img">
                  <img :src="price.image" alt="" />
                </div>
                <span>{{ price.content }}</span>
              </li>
            </ul>
          </div>
          <div class="create_time">
            {{ item.release_time }}
          </div>
        </div>
      </div>
    </div>

    <div class="commtent">
      <h3>
        热门评论<span>{{ num }}条评论</span>
      </h3>
      <div class="commtent_inp">
        <input type="text" placeholder="说点什么，让TA也认识爱做饭的你" />
        <i class="iconfont icon-laohu"></i>
      </div>
      <div class="commtent_writer">
        <ul>
          <li v-for="(item, index) in comments" :key="index" v-show="index <= 2">
            <div class="comm">
              <div class="img">
                <img :src="item.u.p" alt="" />
                <p>
                  {{ item.u.n }} <span>LV.{{ item.u.lvl }}</span>
                </p>
              </div>
              <div class="zan">
                <i class="iconfont icon-aixin"></i>
                <p>{{item.like_count == 0 ? '赞': item.like_count}}</p>
              </div>
            </div>
            <div class="comm_text" v-for="(value, index) in item.content" :key="index">
              <p>
                {{ value.c }}
              </p>
              <div class="reply" v-for="(text, index) in item.child_comments" :key="index">
                <p>
                  {{ text.u.n }}:<span
                    v-for="(vaule, index) in text.content"
                    :key="index"
                    >{{ vaule.c }}</span
                  >
                </p>
              </div>

            </div>
          </li>
        </ul>
        <p class="all_commtent" @click="show = true" >查看全部{{num}}条评论</p>
          <van-action-sheet v-model="show" title="全部评论">
            <ul>
          <li v-for="(item, index) in comments" :key="index">
            <div class="comm">
              <div class="img">
                <img :src="item.u.p" alt="" />
                <p>
                  {{ item.u.n }} <span>LV.{{ item.u.lvl }}</span>
                </p>
              </div>
              <div class="zan">
                <i class="iconfont icon-aixin"></i>
                <p>{{item.like_count == 0 ? '赞': item.like_count}}</p>
              </div>
            </div>
            <div class="comm_text" v-for="(value, index) in item.content" :key="index">
              <p>
                {{ value.c }}
              </p>
              <div class="reply" v-for="(text, index) in item.child_comments" :key="index">
                <p>
                  {{ text.u.n }}:<span
                    v-for="(vaule, index) in text.content"
                    :key="index"
                    >{{ vaule.c }}</span
                  >
                </p>
              </div>

            </div>
          </li>
        </ul>
          </van-action-sheet>

      </div>
    </div>

    <div class="study">
      <div class="study_doing">
        <div>
          <i class="iconfont icon-ok"></i>
        </div>
        <span>传学做</span>
      </div>
    </div>

    <div class="details_footer">
      <div class="talk">
        <div class="inp">
          <input type="text" placeholder="说点什么" />
        </div>
        <div class="commtent_num" @click="show = true" >
          <i class="iconfont icon-jianyi"></i>
          <span>{{num}}</span>
        </div>
         <van-action-sheet v-model="show" title="全部评论">
            <ul>
          <li v-for="(item, index) in comments" :key="index">
            <div class="comm">
              <div class="img">
                <img :src="item.u.p" alt="" />
                <p>
                  {{ item.u.n }} <span>LV.{{ item.u.lvl }}</span>
                </p>
              </div>
              <div class="zan">
                <i class="iconfont icon-aixin"></i>
                 <p>{{item.like_count == 0 ? '赞': item.like_count}}</p>
              </div>
            </div>
            <div class="comm_text" v-for="(value, index) in item.content" :key="index">
              <p>
                {{ value.c }}
              </p>
              <div class="reply" v-for="(text, index) in item.child_comments" :key="index">
                <p>
                  {{ text.u.n }}:<span
                    v-for="(vaule, index) in text.content"
                    :key="index"
                    >{{ vaule.c }}</span
                  >
                </p>
              </div>

            </div>
          </li>
        </ul>
          </van-action-sheet>
        <div class="coll">
          <i class="iconfont icon-shoucangjia"></i>
          收藏
        </div>
        <div class="doing">
          <div>
            <i class="iconfont icon-ok"></i>
          </div>
          <span>传学做</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRecipeDetail, getRecipeFlatcomments } from "../../api/details";
export default {
  data() {
    return {
      details: [],
      comments: [],
      child: [],
      num: null,
      show:false
    };
  },
  methods:{
     prev(){
        this.$router.go(-1)
      },
  },
  created() {
    let queryId = this.$route.query.id;
    console.log(queryId);
    getRecipeDetail(queryId).then((data) => {
      this.details.push(data.result.recipe);
      this.num = data.result.recipe.comments_count;
      console.log(this.details);
    });
    getRecipeFlatcomments(queryId + "/0/20").then((data) => {
      this.comments = data.result.comments;
      this.child = data.result.comments;
     
    });
  },
  beforeDestroy() {
    this.details.splice(0, 1);
  },
};
</script>

<style lang="less">
.van-action-sheet__content{
  ul{
    padding: 0 15px;
  }
}
.datails_vegetable {
  .title_img {
    width: 100%;
    position: relative;
    
    img {
      width: 100%;
      height: 100%;
    }

    video{
       width: 100%;
      height: 100%;
    }
    .fen {
      width: 100%;
      position: fixed;
      display: flex;
      justify-content: space-between;
      top: 30px;
      margin: auto;
      .left {
        margin-left: 20px;
        i {
          color: white;
          font-size: 18px;
        }
      }
      .right {
        margin-right: 20px;
        i {
          color: white;
          font-size: 18px;
          margin-left: 35px;
        }
      }
    }
  }
  .datails_content {
    margin: 0px 16px;
    .title_name {
      margin-top: 20px;
      h2 {
        font-size: 20px;
        line-height: 20px;
        color: #000000;
      }
      span {
        display: block;
        margin-top: 10px;
        font-size: 12px;
        line-height: 12px;
        color: #606060;
      }
    }
    .title_writer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 40px;
      .img {
        display: flex;
        align-items: center;
        img {
          margin-right: 8px;
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        h4 {
          font-size: 14px;
          line-height: 14px;
          span {
            font-size: 8px;
            line-height: 8px;
            color: #b78813;
          }
        }
      }
      .writer {
        padding: 0px 25px;
        background-color: #ffc533;
        border-radius: 20px;
        line-height: 30px;
        font-weight: bold;
        p {
          font-size: 12px;
        }
      }
    }
    .title_write {
      margin-top: 20px;
      .write {
        p {
          font-size: 15px;
          line-height: 30px;
          color: #202020;
        }
      }
      .title_time {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 20px;
        .img {
          display: flex;
          align-items: center;
          font-size: 16px;
          line-height: 16px;
          color: #000000;
          img {
            width: 21px;
            height: 21px;
            margin-right: 10px;
          }
        }
        .difficulty {
          display: flex;
          align-items: center;
          font-size: 16px;
          line-height: 16px;
          color: #000000;
          img {
            width: 21px;
            height: 21px;
            margin-right: 10px;
          }
        }
      }
    }
    .Ingredients {
      margin-top: 35px;
      ul {
        display: flex;
        justify-content: space-between;

        flex-direction: column;
        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 22px;
          p {
            font-size: 16px;
            line-height: 16px;
          }
          span {
            display: block;
            font-size: 16px;
          }
        }
      }
    }
    .step {
      margin-top: 50px;
      .step_title {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        h3 {
          font-size: 16px;
          line-height: 16px;
          color: #000000;
        }
        span {
          display: block;
          font-size: 12px;
          line-height: 12px;
          color: #578f96;
        }
      }
      .step_content {
        margin-top: 20px;
        ul {
          display: flex;
          flex-direction: column;
          li {
            margin-bottom: 27px;
            p {
              font-size: 14px;
              line-height: 14px;
              color: black;
            }
            .img {
              width: 100%;
              margin-top: 10px;
              img {
                width: 100%;
                height: 100;
                border-radius: 8px;
              }
            }
            span {
              display: block;
              margin-top: 15px;
              font-size: 16px;
              line-height: 24px;
            }
          }
        }
      }
      .create_time {
        font-size: 12px;
        line-height: 12px;
        color: #a2a2a2;
      }
    }
  }
}
.commtent {
  padding: 0 16px;
  margin-top: 42px;

  h3 {
    font-size: 16px;
    line-height: 16px;
    span {
      font-size: 14px;
      line-height: 14px;
      color: #27737d;
      display: inline-block;
      margin-left: 6px;
    }
  }
  .commtent_inp {
    margin-top: 23px;
    position: relative;
    height: 40px;
    width: 100%;
    input {
      background-color: #f5f5f5;
      padding: 0px 42px;
      color: #7d7d7d;
      font-size: 16px;
      line-height: 40px;
      border-radius: 30px;
      border: 0px;
      width: 75%;
    }
    i {
      top: 8px;
      left: 8px;
      font-size: 25px;
      position: absolute;
      color: #f6df9b;
    }
  }
  .commtent_writer {
    margin-top: 18px;
    ul {
      li {
        margin-bottom: 30px;
        .comm {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .img {
            display: flex;
            align-items: center;
            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
            p {
              margin-left: 8px;
              font-size: 14px;
              line-height: 14px;
              color: #1d1d1d;
              span {
                display: inline-block;
                font-size: 8px;
                line-height: 8px;
                color: #ae8109;
              }
            }
          }
          .zan {
            display: flex;
            align-items: center;
            .iconfont {
              font-size: 12px;
              line-height: 12px;
              color: black;
            }
            p {
              margin-left: 4px;
              font-size: 12px;
              line-height: 12px;
              color: black;
            }
          }
        }
        .comm_text {
          margin-left: 45px;
          margin-top: 8px;
          p {
            font-size: 12px;
            line-height: 16px;
          }
        .reply {
          width: 80%;
         
          margin-top: 8px;
          background-color: #fafafa;
          border-radius: 6px;
          p {
            padding: 0 10px;
            font-size: 12px;
            line-height: 26px;
            font-weight: bold;
            span{
              font-weight: normal;
            }
          }
        }
            }
      }
    }
    .all_commtent{
      text-align: center;
      font-size: 12px;
      color: #176E79;
    }
  }
}
.study {
  height: 43px;
  background-color: #fec633;
  border-radius: 25px;
  margin: 0 15px;
  margin-bottom: 78px;
  margin-top: 57px;
  text-align: center;
  .study_doing {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 43px;
    div {
      width: 20px;
      height: 20px;
      border-radius: 5px;
      border: 1px solid black;
      i {
        font-size: 13px;
        line-height: 21px;
      }
    }
    span {
      display: inline-block;
      font-size: 14px;
      line-height: 14px;
      margin-left: 12px;
    }
  }
}
.details_footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  .talk {
    display: flex;
    align-items: center;
    margin-top: 15px;
    .inp {
      margin-left: 20px;
      width: 135px;
      input {
        width: 100%;
        line-height: 35px;
        font-size: 12px;
        background-color: #f5f5f5;
        color: #959595;
        padding: 0 10px;
        border: 0px;
        border-radius: 10px;
      }
    }
    .commtent_num {
      margin-left: 24px;
      font-size: 12px;
      display: flex;
      align-items: center;
      i {
        font-size: 20px;
      }
      span {
        display: inline-block;
        font-size: 12px;
        line-height: 12px;
      }
    }
    .coll {
      margin-left: 24px;
      font-size: 12px;
    }
    .doing {
      margin-left: 12px;
      display: flex;
      align-items: center;
      div {
        width: 21px;
        height: 21px;
        border-radius: 5px;
        background-color: #fec92f;
        text-align: center;
        i {
          font-size: 13px;
          line-height: 21px;
        }
      }
      span {
        display: inline-block;
        font-size: 12px;
        line-height: 12px;
      }
    }
  }
}

.van-popup{
  height: 450px;
}
</style>